<script setup>
import {onMounted, ref} from "vue";
import {manageStore} from "../../../stores/counter.js";

let currentDictUkId = ref("")
let dictTableData = ref([
  {
    code: "status",
    name: "状态",
    status: "enable",
    sort: 0,
    dictItemList: [
      {
        code: "enable",
        name: "启用",
        value: "enable",
        status: "enable",
        sort: 0,
      },
      {
        code: "disable",
        name: "停用",
        value: "disable",
        status: "enable",
        sort: 0,
      }
    ]
  },
  {
    code: "gender",
    name: "性别",
    status: "enable",
    sort: 0,
    dictItemList: [
      {
        code: "male",
        name: "男",
        value: "male",
        status: "enable",
        sort: 0,
      },
      {
        code: "female",
        name: "女",
        value: "female",
        status: "enable",
        sort: 0,
      }
    ]
  },
])
let dictItemTableData = ref([])
let showDictForm = ref(false)
let showDictItemForm = ref(false)

let dictForm = ref({})
let dictItemForm = ref({})

function handleDictTableRowClick(dict) {
  console.log(dict.dictItemList)
  dictItemTableData.value = dict.dictItemList
}

</script>

<template>
  <div style="display: flex; flex-flow: row nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: column nowrap; margin-right: 5px; height: 100%; overflow: hidden;">
      <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
        <el-form :inline="true" style="height: 30px">
          <el-form-item label="Name">
            <el-input clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDictList">Search</el-button>
            <el-button type="primary" @click="handleDictCreate({})">New</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
        <el-table
            highlight-current-row
            @row-click="handleDictTableRowClick"
            :data="dictTableData" border style="width: 100%;">
          <el-table-column prop="code" label="Code" min-width="200"/>
          <el-table-column prop="name" label="Name" min-width="200"/>
          <el-table-column prop="status" label="Status" width="80">
            <template #default="scope">
              <el-switch
                  active-value="enable"
                  inactive-value="disable"
                  v-model="scope.row.status "
              />
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="Sort" width="60"/>
          <el-table-column label="Operations" width="180">
            <template #default="scope">
              <el-button @click="handleEdit(scope.$index, scope.row)">
                Edit
              </el-button>
              <el-popconfirm
                  width="200"
                  @confirm="handleDictDelete(scope.row)"
                  :title="'delete dict [' + scope.row.name + '] !'">
                <template #reference>
                  <el-button type="danger">
                    Delete
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="display: flex; flex-flow: column nowrap; flex: auto; height: 100%; overflow: hidden;">
      <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
        <el-form :inline="true" style="height: 30px">
          <el-form-item label="Name">
            <el-input clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleDictItemList">Search</el-button>
            <el-button type="primary" @click="handleDictItemCreate({})">New</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="manage-main">
        <el-table
            ref="dictTableRef"
            :data="dictItemTableData" border style="width: 100%;">
          <el-table-column prop="code" label="Code" min-width="100"/>
          <el-table-column prop="name" label="Name" min-width="100"/>
          <el-table-column prop="value" label="Value"/>
          <el-table-column prop="status" label="Status" width="70">
            <template #default="scope">
              <el-switch
                  active-value="enable"
                  inactive-value="disable"
                  v-model="scope.row.status "
              />
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="Sort" width="80"/>
          <el-table-column label="Operations" width="180">
            <template #default="scope">
              <el-button @click="handleEdit(scope.$index, scope.row)">
                Edit
              </el-button>
              <el-popconfirm
                  width="200"
                  @confirm="handleDictItemDelete(scope.row)"
                  :title="'delete dict item [' + scope.row.name + '] !'">
                <template #reference>
                  <el-button type="danger">
                    Delete
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <el-dialog title="dict manage" v-model="showDictForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="dictForm" label-width="80px">
      <el-form-item label="字典编码">
        <el-input v-model="dictForm.code"></el-input>
      </el-form-item>
      <el-form-item label="字典名称">
        <el-input v-model="dictForm.name"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="dictForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="dictForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDictSave">Save</el-button>
        <el-button @click="showDictForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog title="dict item manage" v-model="showDictItemForm" :close-on-click-modal="false">
    <el-form ref="form" :model="dictItemForm" label-width="100px">
      <el-form-item label="字典项编码">
        <el-input v-model="dictItemForm.code"></el-input>
      </el-form-item>
      <el-form-item label="字典项名称">
        <el-input v-model="dictItemForm.name"></el-input>
      </el-form-item>
      <el-form-item label="字典项值">
        <el-input v-model="dictItemForm.value"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="dictItemForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="dictItemForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleDictItemSave">Save</el-button>
        <el-button @click="showDictForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>
</style>